<template>
  <div class="invoiceOrderDetial">
    <el-card>
      <div @click="handlerback" style="cursor: pointer;">
        <i class="el-icon-arrow-left"></i> 返回
      </div>
      <div class="invoiceOrderDetial_order">
        <h3>订单代发货</h3>
        <el-link type="primary" :underline="false">查看物流信息</el-link>
      </div>
      <div class="invoiceOrderDetial_address">
        <h3>收货地址</h3>
        <div class="invoiceOrderDetial_address_top">
          {{ address_info.contactName }}
          <span style="color:rgba(0, 0, 0, 0.45)">{{
            address_info.contactPhone
          }}</span>
        </div>
        <div class="invoiceOrderDetial_address_bottom">
          {{ address_info.contactAddress }}
        </div>
      </div>
      <div class="invoiceOrderDetial_detail">
        <h3>订单详情</h3>
        <el-table :data="goodlist" style="width: 100%;margin-top:30px">
          <el-table-column prop="no" label="序号" width="180">
          </el-table-column>
          <el-table-column label="商品信息" width="480">
            <template slot-scope="scoped">
              <div class="product">
                <div class="product_left">
                  <img
                    :src="scoped.row.goodsImg"
                    style="width;60px;height:60px"
                    alt=""
                  />
                </div>
                <div class="product_right">
                  <div>商品名称:{{ scoped.row.goodsName }}</div>
                  <div>商品型号:{{ scoped.row.fitModelName }}</div>
                  <div>使用设备:{{ scoped.row.deviceModelName }}</div>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="goodsPrice"
            label="商品价格(/元)"
            align="center"
          >
          </el-table-column>
          <el-table-column prop="goodsNumber" label="购买数量" align="center">
          </el-table-column>
          <el-table-column prop="subtotal" label="小计" align="center">
          </el-table-column>
        </el-table>
      </div>
      <div class="invoiceOrderDetial_voice">
        <div style="margin:30px 0">详情信息</div>
        <el-checkbox-group v-model="openfa">
          <el-checkbox label="开具发票" name="type" disabled></el-checkbox>
        </el-checkbox-group>
        <el-form ref="form" :model="allform" label-width="120px" v-if="openfa">
          <el-form-item label="发票样式">
            <el-radio-group
              v-model="
                allform.invType == ''
                  ? allform.invType
                  : allform.invType.toString()
              "
              @change="handlerinvoiceStyle"
            >
              <el-radio label="1" readonly>电子发票</el-radio>
              <el-radio label="2" readonly>纸质发票</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="抬头类型">
            <el-radio-group
              v-model="
                allform.vbrkType == ''
                  ? allform.vbrkType
                  : allform.vbrkType.toString()
              "
              @change="handlerinvoiceHead"
            >
              <el-radio label="1" readonly>个人</el-radio>
              <el-radio label="2" readonly>企业</el-radio>
            </el-radio-group>
          </el-form-item>
          <!-- 当用户选择（电子发票或者纸质发票）---（个人）  -->
          <div
            v-if="
              (allform.invType == 1 && allform.vbrkType == 1) ||
                (allform.invType == 2 && allform.vbrkType == 1)
            "
          >
            <el-form-item label="发票信息">
              明细
            </el-form-item>
            <el-form-item label="发票抬头">
              <el-input
                v-model="allform.vbrk"
                placeholder="请输入发票抬头"
                style="width:250px"
                readonly
              ></el-input>
            </el-form-item>
            <el-form-item
              label="电子邮箱"
              v-if="
                (allform.invType == 1 && allform.vbrkType == 1) ||
                  (allform.invType == 1 && allform.vbrkType == 2)
              "
            >
              <el-input
                v-model="allform.setEmailBox"
                placeholder="请输入电子邮箱"
                style="width:250px"
                readonly
              ></el-input>
            </el-form-item>
            <el-form-item
              label="收货地址"
              v-if="allform.invType == 2 && allform.vbrkType == 1"
            >
              <div class="address_list_item_two">
                <div class="address_list_item_top">
                  {{ allform.setAddrInfo }}({{ allform.setUserName }})
                </div>
                <div class="address_list_item_center">
                  {{ allform.setAddrDetail }}
                </div>
              </div>
            </el-form-item>
          </div>
          <!-- 当用户选择（电子发票）---（企业）  -->
          <div
            v-if="
              (allform.invType == 2 && allform.vbrkType == 2) ||
                (allform.invType == 1 && allform.vbrkType == 2)
            "
          >
            <el-form-item label="发票类型">
              <el-radio-group
                v-model="
                  allform.invKind == ''
                    ? allform.invKind
                    : allform.invKind.toString()
                "
                @change="hadnlerinvoiceType"
              >
                <el-radio label="1" readonly>普票</el-radio>
                <el-radio label="2" readonly>专票</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="发票信息">
              明细
            </el-form-item>
            <el-form-item label="发票抬头">
              <el-input
                v-model="allform.vbrk"
                placeholder="请输入发票抬头"
                style="width:250px"
                readonly
              ></el-input>
            </el-form-item>
            <el-form-item label="纳税人识别号">
              <el-input
                v-model="allform.taxpayerCode"
                placeholder="请输入纳税人识别号"
                style="width:250px"
                readonly
              ></el-input>
            </el-form-item>
            <el-form-item label="开户银行">
              <el-input
                v-model="allform.bank"
                placeholder="请输入开户银行(选填)"
                style="width:250px"
                readonly
              ></el-input>
            </el-form-item>
            <el-form-item label="银行账号">
              <el-input
                v-model="allform.bankAccount"
                placeholder="请输入银行账号(选填)"
                style="width:250px"
                readonly
              ></el-input>
            </el-form-item>
            <el-form-item label="企业地址">
              <el-input
                v-model="allform.businessAddress"
                placeholder="请输入企业地址(选填)"
                style="width:250px"
                readonly
              ></el-input>
            </el-form-item>
            <el-form-item label="企业电话">
              <el-input
                v-model="allform.businessPhone"
                placeholder="请输入企业电话(选填)"
                style="width:250px"
                readonly
              ></el-input>
            </el-form-item>
            <el-form-item
              label="电子邮箱"
              v-if="
                (allform.invType == 1 && allform.vbrkType == 1) ||
                  (allform.invType == 1 && allform.vbrkType == 2)
              "
            >
              <el-input
                v-model="allform.setEmailBox"
                placeholder="请输入电子邮箱"
                style="width:250px"
                readonly
              ></el-input>
            </el-form-item>
            <el-form-item
              label="收货地址"
              v-if="allform.invType == 2 && allform.vbrkType == 2"
            >
              <div class="address_list_item_two">
                <div class="address_list_item_top">
                  {{ allform.setAddrInfo }}({{ allform.setUserName }})
                </div>
                <div class="address_list_item_center">
                  {{ allform.setAddrDetail }}
                </div>
              </div>
            </el-form-item>
            <!-- <el-form-item label="备注">
              <el-input
                type="textarea"
                v-model="allform.desc"
                style="width:250px"
              ></el-input>
            </el-form-item> -->
          </div>
        </el-form>
      </div>
      <div class="invoiceOrderDetial_price">
        <div>合计:¥ <span> 123.00</span></div>
      </div>
      <div class="invoiceOrderDetial_info">
        <h3>订单信息</h3>
        <div class="invoiceOrderDetial_info_list">
          <div class="invoiceOrderDetial_info_item">
            <div>订单编号:{{ order_info.orderSn }}</div>
            <div>交易号:{{ order_info.paySn }}</div>
            <div>创建时间:{{ order_info.add_time }}</div>
          </div>
          <div class="invoiceOrderDetial_info_item">
            <div>
              支付方式:{{ order_info.payType == 1 ? "支付宝" : " 其他" }}
            </div>
            <div>支付时间:{{ order_info.pay_time }}</div>
            <div>卖家昵称:{{ order_info.userName }}</div>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import { orderDetaile } from "../../utils/api";
export default {
  data() {
    return {
      orderSn: "",
      openfa: true,
      address_info: "", //地址
      goodlist: [],
      allform: "",
      order_info: "",
      shoppay: "1",
      showInvoice: false, //是否开具发票
      invoiceStyle: "", //发票样式
      invoiceHead: "", //抬头类型
      invoiceType: "" //发票类型
    };
  },
  created() {
    this.orderSn = this.$route.query.orderSn;
    this.handlerDetial();
  },
  methods: {
    // 点击返回按钮
    handlerback() {
      this.$router.push("/invoiceOrder");
    },
    // 获取历史订单详情
    handlerDetial() {
      this.postRequest(orderDetaile, { orderSn: this.orderSn }).then(res => {
        if (res.code == 200) {
          this.address_info = res.data.address;
          this.goodlist = res.data.ordGoods;
          this.allform = res.data.ordInv;
          if (res.data.ordInv == null) {
            this.openfa = false;
          }
          this.order_info = res.data.order;
        }
      });
    },
    // 是否发具发票
    handleropen() {
      if (this.openfa == false) {
        this.showInvoice = false;
      } else {
        this.showInvoice = true;
      }
    },
    // 点击发票样式
    handlerinvoiceStyle(val) {
      this.invoiceStyle = val;
    },
    // 点击抬头类型
    handlerinvoiceHead(val) {
      this.invoiceHead = val;
    },
    // 点击发票类型
    hadnlerinvoiceType(val) {
      this.invoiceType = val;
    }
  }
};
</script>

<style lang="less" scoped>
.invoiceOrderDetial {
  .invoiceOrderDetial_order {
    display: flex;
    flex-direction: row;
    margin: 20px 0;
    h3 {
      margin-right: 20px;
      font-weight: 400;
    }
  }
  .invoiceOrderDetial_address {
    display: flex;
    flex-direction: column;
    line-height: 40px;
    margin-bottom: 20px;
    h3 {
      font-weight: 400;
    }
    .invoiceOrderDetial_address_top {
      font-size: 14px;
    }
    .invoiceOrderDetial_address_bottom {
      font-size: 14px;
    }
  }
  .invoiceOrderDetial_detail {
    margin-bottom: 30px;
    h3 {
      font-weight: 400;
    }
    .product {
      display: flex;
      flex-direction: row;
      .product_left {
        width: 60px;
        height: 60px;
        margin: 0 30px;
      }
      .product_right {
        font-size: 12px;
      }
    }
  }
  .invoiceOrderDetial_voice {
    .address_list_item_two {
      width: 370px;
      height: 105px;
      //   border: 1px solid #0469ff;
      border: 1px solid #cccccc;
      border-radius: 14px;
      display: flex;
      flex-direction: column;
      font-size: 14px;
      color: #000000;
      font-weight: 400;
      margin-left: 10px;
      margin-bottom: 10px;
      .address_list_item_top {
        height: 50px;
        width: 330px;
        line-height: 50px;
        margin-left: 20px;
        border-bottom: 1px solid #d9d9d9;
      }
      .address_list_item_center {
        height: 50px;
        line-height: 50px;
        margin-left: 20px;
      }
    }
  }
  .invoiceOrderDetial_price {
    margin: 40px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.45);
    padding-bottom: 10px;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    div {
      margin-right: 40px;
      font-size: 14px;
      span {
        font-size: 20px;
      }
    }
  }
  .invoiceOrderDetial_info {
    display: flex;
    flex-direction: column;
    h3 {
      font-weight: 400;
    }
    .invoiceOrderDetial_info_list {
      display: flex;
      flex-direction: row;
      margin-top: 10px;
      .invoiceOrderDetial_info_item {
        display: flex;
        flex-direction: column;
        font-size: 13px;
        div {
          line-height: 40px;
          margin-left: 30px;
        }
      }
    }
  }
}
</style>
